<template>
	<view class="device-list page-wrapper">
		<view class="device-item shadow-border" v-for="device in deviceList" :key="device.id"
			@click="navigateToUniPage(`/pages/message/list?imei=${device.imei}&title=${device.devicename}`)">
            <view class="content">
                <view class="row">
                    <text>{{ device.devicename }}</text>
                    <text class="time-text">{{ device.datetime }}</text>
                </view>
                <view class="row">
                    <text class="desc-text one-row-ellipsis">{{ device.content }}</text>
                </view>
            </view>
			
            <view class="icon">
                <uni-icons type="right" color="#D1D5DB" size="20"></uni-icons>
            </view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
	} from "@dcloudio/uni-app";
	import {
		getMessageAllListAPi,
		removeMessageAPiS
	} from "@/api/request";
	import {
		CacheUtils,
		navigateToUniPage,
	} from '@/utils/index';
	import {
		ref
	} from "vue";

	const deviceList = ref([]);
	const fetchMessageList = async () => {
		let res = await getMessageAllListAPi({
			userid: CacheUtils.get('userid'),
		});

		if (res.response.result == true) {
			res.list.forEach((item) => {
				let index = deviceList.value.find((items) => items.id == item.id);
				if (!index) {
					deviceList.value.push(item);
				}
			});
			// deviceList.value = deviceList.value.filter((item) => {
			//     return res.list.find((items) => items.id == item.id);
			// });
		} else {
			uni.showToast({
				title: res.response.msg,
				icon: "none",
			});
			deviceList.value = [];
		}
	}

	onShow(() => {
		fetchMessageList();
	});
</script>


<style lang="scss" scoped>
	.device-list {
		display: flex;
		flex-direction: column;
		row-gap: 10px;
		padding: 0rpx 40rpx;
        background: #FFFFFF;

		.device-item {
			display: flex;
            align-items: center;
			padding: 20rpx 30rpx;
            padding-right: 12rpx;
            border-radius: 20rpx;
            box-sizing: border-box;
            color: #4B5563;
            
            .content{
                flex: 1;
                display: flex;
                flex-direction: column;
                row-gap: 8rpx;
            }
            .icon{
                margin-left: 16rpx;
            }

			.row {
				display: flex;
				column-gap: 10rpx;
				justify-content: space-between;
				align-items: center;
			}

			.desc-text {
                color: #6B7280;
				font-size: 24rpx;
				flex: 1;
			}

			.time-text {
                color: #9CA3AF;
				font-size: 26rpx;
			}
		}
	}
</style>